<template>
	<div class="confirmOrder flexv">
		<!-- 头部 -->
		<pubHead title="确认订单"></pubHead>

		<!-- 商品信息 -->
		<div class="goods_box flex">
			<div class="goods_img flex">
				<img v-if="goodsInfo.goodsType==1" :src="item" v-for="(item,index) in goodsInfo.images.slice(0,1)" :key="index" alt="">
				<img v-if="goodsInfo.goodsType==2 || goodsInfo.goodsType == 3" :src="goodsInfo.images" alt="">
			</div>

			<div class="goods_info flex1 flexv jus-b">
				<p class="twoline title">{{goodsInfo.father}}</p>
				<span class="spec" v-if="goodsInfo.goodsType==1">{{goodsInfo.name}}</span>

				<div class="fix jus-b ali-b">
					<span class="price">￥{{goodsInfo.goods_price}}</span>
					<div class="nums_box flex">
						<div class="cut tc" @click="cutNum">-</div>
						<div class="num tc flex1">{{buyNum}}</div>
						<div class="add tc" @click="addNum">+</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 选择日期 -->
		<div class="time_box flexv mt2">
			<div class="title">选择日期</div>

			<div class="times flex">
				<div v-if="is_show_today==1 && todayStatus" class="time flexv" :class="selectIndex == 1 ? 'disabled' : ''" @click="chooseThis(1)">
					<p class="date">今天&nbsp;&nbsp;{{time}}</p>
					<p class="status">￥{{goodsInfo.goods_price}}</p>
				</div>
				<div v-if="is_show_today==2 || todayStatus==false" class="time flexv unabled">
					<p class="date">今天&nbsp;&nbsp;{{time}}</p>
					<p class="status">不可订</p>
				</div>
				<div v-if="mingStatus" class="time flexv" :class="selectIndex == 2 ? 'disabled' : ''" @click="chooseThis(2)">
					<p class="date">明天&nbsp;&nbsp;{{timea}}</p>
					<p class="status">￥{{goodsInfo.goods_price}}</p>
				</div>
				<div v-if="mingStatus==false" class="time flexv unabled">
					<p class="date">今天&nbsp;&nbsp;{{time}}</p>
					<p class="status">不可订</p>
				</div>
				<div v-if="houStatus" class="time flexv" :class='classObject' @click="chooseThis(3)">
					<p class="date" v-if="day == 0">{{timeb}}&nbsp;&nbsp;周日</p>
					<p class="date" v-if="day == 1">{{timeb}}&nbsp;&nbsp;周一</p>
					<p class="date" v-if="day == 2">{{timeb}}&nbsp;&nbsp;周二</p>
					<p class="date" v-if="day == 3">{{timeb}}&nbsp;&nbsp;周三</p>
					<p class="date" v-if="day == 4">{{timeb}}&nbsp;&nbsp;周四</p>
					<p class="date" v-if="day == 5">{{timeb}}&nbsp;&nbsp;周五</p>
					<p class="date" v-if="day == 6">{{timeb}}&nbsp;&nbsp;周六</p>
					<p class="status">￥{{goodsInfo.goods_price}}</p>
				</div>
				<div v-if="houStatus==false" class="time flexv" :class="Status?'disabled':'unabled'">
					<p class="date" v-if="day == 0">{{timeb}}&nbsp;&nbsp;周日</p>
					<p class="date" v-if="day == 1">{{timeb}}&nbsp;&nbsp;周一</p>
					<p class="date" v-if="day == 2">{{timeb}}&nbsp;&nbsp;周二</p>
					<p class="date" v-if="day == 3">{{timeb}}&nbsp;&nbsp;周三</p>
					<p class="date" v-if="day == 4">{{timeb}}&nbsp;&nbsp;周四</p>
					<p class="date" v-if="day == 5">{{timeb}}&nbsp;&nbsp;周五</p>
					<p class="date" v-if="day == 6">{{timeb}}&nbsp;&nbsp;周六</p>
					<p class="status" v-if="Status">￥{{goodsInfo.goods_price}}</p>
					<p class="status" v-if="Status==false">不可订</p>
				</div>
				<div class="time flex ali-c jus-c" @click="chooseDate">
					<div class="flexv">
						<p class="date">更多</p>
						<p class="date">日期</p>
					</div>
					<img src="@/assets/my_rightarrow.png" alt="">
				</div>
			</div>
		</div>

		<!-- 买家留言 -->
		<div class="content flex mt2">
			<span>买家留言</span>
			<input type="text" class="flex1" placeholder="选填，请先和商家协商一致" maxlength="25" v-model="content">
		</div>

		<!-- 优惠券 -->
		<!-- <div class="youhui flex mt2" @click="selectYou">
			<span>优惠券</span>
			<span class="flex1" style="margin-left: 0.6rem;color: #999;">{{couponTitle}}</span>
			<div class="img">
				<img src="../../assets/a_icon_back.png" />
			</div>
		</div> -->
		<!-- 选择出行人 -->
		<div class="mt2 chuxing" v-if="is_show_card == 1">
			<div class="chuxing-title flex jus-b" @click="showChuxing">
				<p style="color: #333;font-size: 0.3rem;">出行人</p>
				<p style="color: #0090FF;font-size: 0.28rem;">选择出行人</p>
			</div>
			<div class="chuxing-body" v-for="(item1,index1) in chuxingList" :key="index1">
				<div class="chuxing-item flex ali-c" v-if="item1.check">
					<div class="chuxing-item-l" @click="chooseChu(index1)"><img src="@/assets/jian.png" /></div>
					<div class="chuxing-item-r">
						<p style="color: #333333;font-size: 0.28rem;">{{item1.name}}</p>
						<p style="color: #bbb;font-size: 0.28rem;">身份证 {{item1.idcard}}</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 联系人信息 -->
		<div class="mt2 contact flexv">
			<p class="title">订单联系人</p>
			<div class="init flex mt2">
				<span class="name">联系人</span>
				<input type="text" class="flex1" placeholder="请输入取票人姓名" maxlength="8" v-model="name">
			</div>
			<div class="init flex">
				<span class="name">手机号</span>
				<input type="tel" class="flex1" placeholder="请输入手机号" maxlength="11" v-model="tel">
			</div>
			<!-- <div class="init flex" v-if="is_show_card == 1">
				<span class="name">身份证号码</span>
				<input type="text" class="flex1" placeholder="请输入身份证号码" maxlength="20" v-model="idNumber">
			</div> -->
		</div>

		<div class="fix_area">
			<div class="fix_box jus-b">
				<div class="left ali-c">
					<span class="note">共{{buyNum}}件，</span>
					<span class="total">合计: </span>
					<span class="total_price">￥{{allPrice}}</span>
				</div>

				<div class="right white tc" @click="submit">提交订单</div>
			</div>
		</div>

		<van-calendar :show-confirm="false" v-model="show" :maxDate="maxDate" :minDate="minDate" color="#53AB2A" @select="onConfirm" />
		<!-- 优惠券弹窗 -->
		<van-actionsheet v-model="isShow" title="优惠详情">
			<div class="coupon-popup">
				<ul>
					<li class="ali-c item" :class="{on: nowIndex == 'no'}" @click="selectCoupon('no')">
						<span class="title flex1">不使用优惠券</span>
						<span class="public-checkbox ">
							<input type="radio" name="pay_type">
						</span>
					</li>
					<li class="ali-c item" v-for="(coupon, index) in coupon" :key="index" :class="{on: nowIndex == index}" @click="selectCoupon(index)">
						<div class="item_inner flex1">
							<div class="title">{{coupon.deduct + '元' + coupon.name}}</div>
							<span class="stit">{{coupon.apply}}</span>
						</div>
						<span class="public-checkbox ">
							<input type="radio" name="pay_type">
						</span>
					</li>
				</ul>
				<div class="coupon-btn">
					<button @click="ensure">确定</button>
				</div>
			</div>
		</van-actionsheet>
		<van-popup v-model="showChu" position="bottom">
			<div class="showChu">
				<div class="showChu-title flex jus-b">
					<p style="color: #aaa;font-size: 0.3rem;" @click="guanChuxing">关闭</p>
					<p style="color: #333;font-size: 0.3rem;">出行人信息</p>
					<p style="color: #53AB2A;font-size: 0.3rem;" @click="guanChuxing">确认</p>
				</div>
				<div class="showChu-center" v-if="chuxingList.length!=0">
					<div class="flex chus ali-c jus-b" v-for="(item,index) in chuxingList" :key="index">
						<div class="chu-l flex ali-c" @click="chooseChu(index)">
							<div v-if="item.check"><img src="@/assets/checked.png" /></div>
							<div v-else><img src="@/assets/check.png" /></div>
							<div class="chu-c">
								<p>{{item.name}}</p>
								<p>身份证 {{item.idcard}}</p>
							</div>
						</div>
						
						<div class="chu-r" @click="toAddChu(item)">
							<img src="@/assets/bianji.png" />
						</div>
					</div>
				</div>
				<div class="chus-empty flex ali-c jus-c" v-else>
					<div style="width: 3.9rem;height: 0.69rem;margin-top: 2rem;">您还没有出行人信息，请点击下方“新增出行人”进行添加～</div>                       
				</div>
				<div class="showChu-bottom flex jus-c ali-c" @click="toAddChu(1)">
					<img src="@/assets/plus.png" />
					<span>新增出行人</span>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import { u_Reg, isDateBetween } from '@/config/utils.js';
	import { Toast, Popup, Dialog, Calendar, ActionSheet } from 'vant';
	import { createOrder, waitOrder, Suitable, tripList } from '@/request/api';
	// import 'vant/lib/index.css';

	Vue.use(Toast, Popup, Calendar, ActionSheet )
	export default {
		data() {
			return {
				chuxingList:[],
				once: true, // 复制重复提交
				selectIndex: 1, // 选择的日期 
				show: false, // 展示日期
				goodsInfo: '', // 商品信息
				content: '', // 留言
				name: '', // 姓名
				tel: '', // 手机号
				idNumber: '', // 身份证号码
				totalPrice: '', // 商品总价
				minDate: new Date(),
				maxDate: '',
				time: '', // 今天
				timea: '', // 明天
				timeb: '', // 后天
				timec:'',
				timed:'',
				day: '', // 星期几
				selectYear: '', // 选择的年份
				sectime: '', // 选中的时间
				is_show_card: '', // 是否要输入身份证 1要 2不需要
				is_show_today: '', //是否开启今日票 1 开启 2 不开启
				buyNum: 1, // 购买数量
				noneHou: false,
				isShow: false,
				couponTitle: '请选择优惠券',
				couponId: '', //优惠券id
				couponPrice: 0, //优惠券金额
				nowIndex: 'no', //索引初始值
				coupon: '', // 优惠卷
				showChu:false,
				chooseId:'',
				endTime:0,
				endTime_1:0,
				endTime_2:0,
				todayStatus:true,
				mingStatus:true,
				houStatus:true,
				Status:true
			}
		},
		computed: {
			allPrice:{
				get(){
					return (this.totalPrice * this.buyNum).toFixed(2) - this.couponPrice
				},
				set(val){
				}
			},
			classObject() {
				return {
					'disabled': this.selectIndex == 3,
					'noneClick': this.noneHou
				}
			}

		},
		components: {
			pubHead,
			"van-calendar": Calendar,
			"van-actionsheet": ActionSheet
		},
		created() {
			let data = new Date();
			let jin = ''
			this.selectYear = data.getFullYear();
			this.time = data.$format('MM-dd');
			jin = data.$format('yyyy-MM-dd');
			data.setDate(data.getDate() + 1);
			this.timea = data.$format('MM-dd');
			this.timec = data.$format('yyyy-MM-dd');//明天
			data.setDate(data.getDate() + 1);
			this.timeb = data.$format('MM-dd');
			this.timed = data.$format('yyyy-MM-dd');//后天
			this.day = data.getDay();
			this.goodsInfo = JSON.parse(this.$route.query.data);
			this.totalPrice = this.goodsInfo.goods_price;
			
			console.log(this.goodsInfo)
			this.maxDate = new Date(this.goodsInfo.end_time)
			this.minDate = new Date(this.goodsInfo.start_time).getTime() >= new Date().getTime() ? new Date(this.goodsInfo.start_time) : new Date()
			let ab = this.maxDate.$format('MM-dd')
			if (ab == this.timea) {
				this.noneHou = true
			} else {
				this.noneHou = false
			}
			
			this.todayStatus = isDateBetween(jin,this.goodsInfo.start_time,this.goodsInfo.end_time)
			this.mingStatus = isDateBetween(this.timec,this.goodsInfo.start_time,this.goodsInfo.end_time)
			this.houStatus = isDateBetween(this.timed,this.goodsInfo.start_time,this.goodsInfo.end_time)
			if(this.houStatus==false)
			{
				this.Status = false
			}
			this.getData();
			
		},
		 beforeRouteEnter (to, from, next) {
		    //在next中写处理函数
			if(from.name=='AddChu'){
				next(vm => vm.showChuxing())
			}else{
				next()
			}
			
		 },
		methods: {
			getData() {
				this.$loading();
				waitOrder({
					id: this.goodsInfo.id,
					item_type: this.goodsInfo.goodsType
				}).then(res => {
					Toast.clear();
					if (res.code == 1) {
						this.is_show_card = res.data.is_show_card;
						this.is_show_today = res.data.is_show_today;
						if(res.data.is_show_today==1 && this.todayStatus){
							this.sectime = this.selectYear + '-' + this.time;
						}
					}
				})
			},
			toAddChu(item){
				this.$router.push('/addChu?item='+JSON.stringify(item))
			},
			chooseChu(index){
				this.chuxingList[index].check = !this.chuxingList[index].check
				let chooseId = this.chuxingList.map(item=>{
					if(item.check){
						return item.id
					}
				})
				this.chooseId = chooseId.filter(Boolean)
				console.log(this.chooseId)
				
			},
			showChuxing(){
				this.showChu = true
				this.$loading()
				tripList({
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						this.chuxingList = res.data.list
						this.chuxingList.forEach(item=>{
							this.$set(item,'check',false)
						})
					}
				})
			},
			guanChuxing(){
				this.showChu = false
			},
			// 选择日期
			chooseDate() {
				this.show = true;
			},
			// 选择日期
			chooseThis(index) {
				this.selectIndex = index;
				let newDate = new Date()
				if (index == 1) {
					this.sectime = newDate.getFullYear() + '-' + this.time
				} else if (index == 2) {
					this.sectime = newDate.getFullYear() + '-' + this.timea
				} else if (index == 3) {
					this.sectime = newDate.getFullYear() + '-' + this.timeb
				}
			},
			// 确定日期
			onConfirm(e) {
				
				this.selectYear = e.getFullYear();
				let sectime = ((e.getMonth() + 1) >= 10 ? e.getMonth() + 1 : ('0' + (e.getMonth() + 1))) + '-' + (e.getDate() >= 10 ?
					e.getDate() : '0' + e.getDate());
				if (sectime == this.time) {
					this.selectIndex = 1;
					this.sectime = this.selectYear + '-' + this.time;
				} else if (sectime == this.timea) {
					this.selectIndex = 2;
					this.sectime = this.selectYear + '-' + this.timea;
				} else {
					this.selectIndex = 3;
					this.timeb = ((e.getMonth() + 1) >= 10 ? e.getMonth() + 1 : ('0' + (e.getMonth() + 1))) + '-' + (e.getDate() >= 10 ?
						e.getDate() : '0' + e.getDate());
					this.day = e.getDay();
					this.sectime = this.selectYear + '-' + this.timeb;
				}
				this.Status = true;
				this.show = false;
				
			},
			// 减
			cutNum() {
				if (this.buyNum > 1) {
					this.buyNum--;
				} else {
					this.$tip('不能再减了哦T_T');
				}
			},
			// 加
			addNum() {
				this.buyNum++;
			},
			// 获取商品总价
			getPrice() {
				// this.totalPrice = (Number(this.buyNum) * Number(this.goodsInfo.goods_price)).toFixed(2)
			},
			selectYou() {
				// this.$router.push('/selectYou?price='+this.allPrice)
				this.isShow = true
				this.getSutable()
			},
			// 选择完优惠券的回调
			selectCoupon (i) {
			    this.nowIndex = i;
			},
			selectCallback () {
			    if (this.confirmMsg.can_use_coupon_num > 0) {
			        this.isShow = true;
			    } else {
			        this.$tip('暂时没有可用的优惠券呦~');
			    }
			},
			ensure() {
				this.isShow = false;
				if (this.nowIndex == 'no') {
					this.couponTitle = '不使用优惠券';
					this.couponId = '';
					this.couponPrice = 0;
					// this.allPrice = this.allPrice;
				} else {
					this.couponTitle = this.coupon[this.nowIndex].deduct + '元';
					this.couponId = this.coupon[this.nowIndex].id;
					this.couponPrice = this.coupon[this.nowIndex].deduct;
				}

			},
			getSutable() {
				this.$loading()
				Suitable({
					token: localStorage.getItem('token'),
					pay_price: this.allPrice,
					page: 1,
					pagesize: 10
				}).then(res => {
					Toast.clear();
					if (res.code == 1) {
						this.coupon = res.data.list
						this.coupon.forEach((item) => {
							item.check = false;
						})
					} else {
						this.$tip(res.msg)
					}
				})
			},
			// 提交订单
			submit() {
				if (!this.name) {
					this.$tip('请输入取票人姓名!');
					return
				}
				if (!this.tel) {
					this.$tip('请输入手机号!');
					return
				}
				if (!u_Reg(this.tel, 'phone')) {
					this.$tip('请输入正确的手机号!');
					return
				}
				if (this.is_show_card == 1) {
					if (this.chooseId.length==0) {
						this.$tip('请选择出行人！');
						return
					}
					if(this.chooseId.length != this.buyNum)
					{
						this.$tip('出行人数与购买票数不符合！');
						return
					}
				}
				let chooseId_1 = '';
				if(this.chooseId!=''){
					chooseId_1 = this.chooseId.join()
				}
				if (true) {
					let that = this;
					this.once = false;
					this.$loading();
					createOrder({
						token: localStorage.getItem('token'),
						scenic_ticket_id: this.goodsInfo.id,
						num: this.buyNum,
						depart_date: this.sectime,
						remark: this.content ? this.content : '',
						consignee: this.name,
						reserved_telephone: this.tel,
						totalprice: this.allPrice,
						idcard: this.is_show_card == 1 ? this.idNumber : '',
						type: this.goodsInfo.goodsType,
						coupon_id:this.couponId,
						trip_ids:chooseId_1
					}).then(res => {
						Toast.clear();
						this.once = true;
						this.$tip(res.msg)
						if (res.code == 1) {
							setTimeout(() => {
								let data = {
									order_no: res.data.order_no,
									pay_money: that.allPrice
								}
								that.$router.replace('/orderPay?info=' + JSON.stringify(data))
							}, 1200)
						}
					})
				}

			},
		},
	}
</script>
<style lang="less" scoped>
	.confirmOrder {
		min-height: 100vh;
		background-color: #f5f5f5;

		// 商品信息
		.goods_box {
			padding: 0.3rem;
			background-color: #fff;

			.goods_img {
				width: 1.8rem;
				height: 1.8rem;
				border-radius: 0.1rem;
				border: 1px solid #f5f5f5;
				overflow: hidden;

				img {
					margin: auto;
				}
			}

			.goods_info {
				margin-left: 0.2rem;

				.title {
					font-size: 0.3rem;
					line-height: 150%;
					color: #333;
				}

				.spec {
					margin-right: auto;
					font-size: 0.24rem;
					line-height: 120%;
					color: #999;
				}

				.fix {
					.price {
						font-size: 0.3rem;
						line-height: 120%;
						color: #EE1C1A;
					}

					.nums_box {
						width: 2.04rem;
						height: 0.5rem;
						border: 0.01rem solid #dadada;
						border-radius: 0.1rem;

						.cut,
						.add {
							width: 0.6rem;
							font-size: 0.4rem;
							line-height: 0.48rem;
							color: #bebebe;
						}

						.num {
							border-left: 0.01rem solid #dadada;
							border-right: 0.01rem solid #dadada;
							font-size: 0.3rem;
							line-height: 0.48rem;
							color: #333;
						}
					}
				}
			}
		}

		// 选择日期
		.time_box {
			padding: 0.3rem;
			background-color: #fff;

			.title {
				font-size: 0.3rem;
				line-height: 120%;
				font-weight: bold;
				color: #333;
			}

			.times {
				margin-top: 0.4rem;

				.time {
					padding: 0.3rem 0.12rem;
					border: 0.03rem solid #e1e2e3;
					border-radius: 0.1rem;
					margin-right: 0.2rem;
					.date {
						font-size: 0.26rem;
						line-height: 120%;
						color: #333;
					}

					.status {
						margin-top: 0.1rem;
						font-size: 0.24rem;
						line-height: 120%;
						color: #EE1C1A;
					}

					img {
						width: 0.12rem;
						height: 0.18rem;
						margin: auto 0 auto 0.1rem;
					}
				}

				.time.disabled {
					border-color: #53AB2A;
					background-color: #F4FEEF;
				}

				.time.unabled {
					color: #e1e2e3;
				}

				.time.noneClick {
					border-color: #e1e2e3;
					color: #e1e2e3 !important;
					pointer-events: none;
					background-color: #e1e2e3;
				}

				.time:last-child {
					margin-right: 0;
					width: 1.2rem;
				}
			}
		}
		// 出行人
		.chuxing{
			padding: 0.2rem 0.3rem;
			background-color: #fff;
			.chuxing-body{
				.chuxing-item{
					padding: 0.2rem 0;
				}
				.chuxing-item-l{
					img{
						width: 0.33rem;
						height: 0.33rem;
						margin-right: 0.3rem;
					}
				}
			}
		}
		.showChu{
			height: 7.32rem;
			background-color: #fff;
			.showChu-title{
				padding: 0.3rem;
				border-bottom: 0.01rem solid #E6E7E8;
				position: sticky;
				top: 0;
				background-color: #fff;
			}
			.showChu-center{
				padding-bottom: 0.88rem;
				.chus{
					border-bottom: 0.01rem solid #E6E7E8;
					padding: 0.3rem 0.3rem;
					overflow-y: scroll;
					.chu-l{
						font-size: 0.28rem;
						img{
							width: 0.38rem;
							height: 0.38rem;
							margin-right: 0.2rem;
						}
					}
					.chu-c{
						
					}
					.chu-r{
						img{
							width: 0.38rem;
							height: 0.38rem;
						}
					}
				}
			}
			.chus-empty{
				color: #aaa;
				font-size: 0.26rem;
			}
			.showChu-bottom{
				img{
					width: 0.32rem;
					height: 0.32rem;
					margin-right: 0.1rem;
				}
				height: 0.88rem;
				color: #fff;
				background-color: #53AB2A;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				font-size: 0.32rem;
			}
		}
		// 买家留言
		.content {
			height: 0.84rem;
			padding: 0 0.3rem;
			font-size: 0.3rem;
			line-height: 0.84rem;
			color: #333;
			background-color: #fff;

			input {
				width: 4rem;
				height: 0.6rem;
				margin: auto 0 auto 0.3rem;
				line-height: 0.6rem;
			}
		}

		// 优惠券
		.youhui {
			height: 0.84rem;
			padding: 0 0.3rem;
			font-size: 0.3rem;
			line-height: 0.84rem;
			color: #333;
			background-color: #fff;

			img {
				width: 0.20rem;
				height: 0.28rem;
			}
		}

		// 联系人信息
		.contact {
			padding: 0.3rem;
			background-color: #fff;

			.title {
				font-size: 0.3rem;
				line-height: 120%;
				font-weight: bold;
				color: #333;
			}

			.init {
				height: 0.84rem;
				font-size: 0.28rem;
				line-height: 0.84rem;
				color: #333;

				input {
					height: 0.6rem;
					margin: auto 0 auto 0.6rem;
					line-height: 0.6rem;
				}
			}
		}

		.fix_area {
			height: 0.98rem;

			.fix_box {
				width: 100%;
				max-width: 750px;
				height: 0.98rem;
				margin: 0 auto;
				position: fixed;
				z-index: 100;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #fff;

				.left {
					padding-left: 0.3rem;

					.note {
						font-size: 0.24rem;
						line-height: 120%;
						color: #666;
					}

					.total {
						margin-left: 0.16rem;
						font-size: 0.3rem;
						line-height: 120%;
						color: #333;
					}

					.total_price {
						margin-left: 0.16rem;
						font-size: 0.3rem;
						line-height: 120%;
						color: #EE1C1A;
					}
				}

				.right {
					width: 2.2rem;
					height: 100%;
					font-size: 0.32rem;
					line-height: 0.98rem;
					background-color: #53AB2A;
				}
			}
		}

		// 优惠券弹窗
		.coupon-popup {
			position: relative;
			height: 6.4rem;
			background-color: #f0f0f0;

			ul {
				height: 5.32rem;
				overflow: auto;
				padding: 0 .28rem;

				li {
					height: 0.88rem;
					margin-bottom: .2rem;
					font-size: .28rem;

					.item_inner {
						line-height: 1;

						.title {
							font-size: .28rem;
							margin-bottom: .1rem;
						}

						span {
							font-size: 0.22rem;
							color: #999999;
						}
					}

					.public-checkbox {
						display: inline-block;
						width: .34rem;
						height: .34rem;
						margin-right: .2rem;
						border-radius: 100%;
						background: url(../../assets/checkbox-ico0.png) no-repeat center;
						background-size: 100% 100%;

						input {
							display: none;
						}
					}

				}

				.on {
					.public-checkbox {
						background: url(../../assets/checked.png) no-repeat center;
						background-size: 100% 100%;
					}
				}

				.border-no {
					border-bottom: none;
				}

			}

			.coupon-btn {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				padding: 0.1rem 0.28rem;
				background-color: #fff;
			}

			// 关闭按钮
			button {
				width: 100%;
				height: .88rem;
				border-radius: 0.44rem;
				background-color: #5AAF33;
				font-size: .3rem;
				color: #fff;
				border: none;
			}
		}
	}
</style>
